<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 320px;
				border: solid 5px black;
				display: flex;
				list-style: none;
				flex-wrap: wrap;
				justify-content: space-between;
				padding:0px 10px 10px;
				margin: 100px auto;
			}
			li{
				width: 100px;
				height: 100px;
				background: wheat;
				text-align: center;
				line-height: 100px;
				margin: 10px 0px 0px 0px;
			}
			.active{
				background: orange;
				color: white;
			}
			.aside{
				position: fixed;
				top: 0px;
				left: 0px;
				right: 0;
				bottom: 0px;
				background: rgba(0,0,0,0);
				display: none;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var bs = 32;
				var n1 = 0;//获奖奖品的下标
				$(".start").click(function(){
					$(".aside").show();
					bs = 32;
					n1 = Math.floor(Math.random()*8);//[0,7]
					bs = bs+n1+(8-i);
					setTimeout(fn,100);
				})
				var i= 0;
				var arr = [0,1,2,5,8,7,6,3];
				var arr2 = ["奖品1","奖品2","奖品3","奖品4","奖品5","奖品6","奖品7","奖品8"];
				function fn(){
					bs--;
					i++;
					if(i==arr.length){
						i=0;
					}
					$("li").removeClass("active");
					$("li").eq(arr[i]).addClass("active");
					if(bs==0){
						//弹出中奖信息	
						$(".aside").hide();
						console.log("奖品为："+arr2[n1]);
					}else{
						if(bs<=10){
							setTimeout(fn,(10-bs)*50+100);
						}else{
							setTimeout(fn,100);
						}
						
					}
					
					
				}
			})
		</script>
	</head>
	<body>
		<div class="aside"></div>
		<ul>
			<li class="active">奖品1</li>
			<li>奖品2</li>
			<li>奖品3</li>
			<li>奖品8</li>
			<li class="start">开始抽奖</li>
			<li>奖品4</li>
			<li>奖品7</li>
			<li>奖品6</li>
			<li>奖品5</li>
		</ul>
	</body>
</html>
